<template>
  <div class="box">
    <ul>
      <li class="information">
        <div>基本信息</div>

        <span>入住时间：14:00之后</span>

        <span>离店时间：12:00之后前</span>
        <!-- 酒店开业时间 / 酒店装修时间 -->
        <span>{{data.creation_time}}/{{data.renovat_time}}</span>
        <!-- 房间总客房 -->
        <span>酒店规模：{{data.roomCount}}间客房</span>
      </li>
      <li class="facility">
        <div>主要设施</div>
        <span>热水壶</span>
        <span>外币兑换服务</span>
        <span>wifi</span>
      </li>
      <li>
        <div>停车服务</div>
        <!-- 停车服务 有就渲染，没有就 '--'代替 -->
        <span v-if="data.parking==null">--</span>
        <span v-else>{{data.parking}}</span>
      </li>
      <li>
        <div>品牌信息</div>
        <!-- 品牌 有就渲染，没有就 '--'代替 -->
        <span v-if="data.hotelbrand==null">--</span>
        <span v-else>{{data.hotelbrand.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      hotelData: {},
      facilityData: {
        parking: "", // 停车服务
        roomCount: "", // 酒店房间数
        hotelbrand: "", // 酒店品牌
        created_at: "", // 入住时间
        enterTime: "", // 离店时间
        hotelasset: "", // 酒店设施
      },
    };
  },
  watch: {
    data: {
      handler(val) {
        this.hotelData = val;
        console.log('-----酒店设施组件监听父组件传过来的data:-----');
        console.log(this.hotelData);
      },
      deep: true,
    },
  },
  // mounted() {
  //   console.log(this.data);
  // },
};
</script>
<style lang="less" scoped>
.box {
  ul {
    margin: 35px 0;
    div {
      color: #000;
      margin-right: 68px;
    }
    span {
      color: #767676;
    }

    li {
      display: flex;
      padding: 20px 10px;
      border-bottom: 1px solid #f1f1f1;
    }
    .information {
      display: flex;
      // justify-content: space-between;
      span {
        margin-right: 50px;
      }
    }
    .facility {
      span {
        background-color: #eeeeee;
        margin-right: 10px;
        padding: 0 8px;
        border-radius: 3px;
      }
    }
  }
}
</style>